1

本文记录关于js数组的一些常用方法,搜集总结。

主要思路:
1. 方法功能是什么
2. 传递的参数是什么
3. 返回值是什么
4. 原来的数组是否改变

第一组:关于数组的增加、删除和修改

1.push 向数组末尾增加新的内容,返回的是添加后新数组的长度,原有的数组改变了

    var arr=[10,11,12,13,14,15];
    var res=arr.push(16,17);
    console.log(res);    //8
    console.log(arr);    //[10,11,12,13,14,15,16,17]

2.unshift 向数组的开头增加新的内容,返回的是添加后新数组的长度,原来的数组也改变

    var res=arr.unshift(16,17);
    console.log(res);   //8

3.splice(n,m,x) 把原有数组中的某些项进行替换。(先删除,然后用x替换)。从所以n(包含n)开始,向后删除m个元素,用x替换,返回删除的数组

原有数组改变规律:
splice(0,0,x) 相当于unshiftsplice(arr.length,0,x) 相当于pushsplice(n,0,x) 向数组中间某个位置添加新的内容 从索引n开始,删除0个内容,把新增的内容x放在索引n的前面。返回的是一个空数组,原有数组改变n开始的索引splice(n,m) 删除数组指定项,从所以n(包含n)开始,向后删除m个元素 ,把删除的内容当做新数组返回,原有数组改变

    var res=arr.splice(2,0,"michael");  //在12后面添加“michael"
    console.log(arr);

4.pop 删除数组最后一个,返回的是删除的那一项,原有数组改变。shift 删除数组第一个,返回的是删除的那一项,原有数组改变


第二组:数组的查询和复制

5.slice(n,m) 从索引n(包含n)开始找到索引m(不包含m)处。把找到的内容作为一个新的数组返回,原有数组是不改变的。

javascript    var arr=[10,11,12,13,14,15];
    var res=arr.slice(1,4);
    console.log(res);   //[11, 12, 13]
    console.log(arr);   //[10, 11, 12, 13, 14, 15]
    slice(n) 从索引n(包含n)开始找到末尾
    slice(0)  // slice()  将原来数组原封不动的复制一份,数组clone

6. concat 本意是实现数组的拼接的 arr1.concat(arr2) 将数组arr2和数组arr1合并成新的数组,原来的数组也不变

concat也可以是数组的克隆,原来的数组也改变(相当于slice(0))

    var arr1=[10,11,12,13,14,15];
    var arr2=[16,17];
    var res=arr1.concat(arr2);
    console.log(arr1);  //[10, 11, 12, 13, 14, 15]
    console.log(res);   //[10, 11, 12, 13, 14, 15, 16, 17]

第三组:将数组转化为我们的字符串

7.toString 把数组中的每一项拿出来,用逗号隔开,组成字符串,原有数组不变

javascript     var arr=["name","michael","age","24"];
     var res=arr.toString();
     console.log(res);   //name,michael,age,24
     console.log(arr);   //["name", "michael", "age", "24"]

8.join(分隔符) 把数组中的每一项拿出来,用指定的分隔符隔开,原有数组不变。

     var arr=["name","michael","age","24"];
     var res=arr.join("|");
     console.log(res);           //"name|michael|age|24"
     console.log(res.length);    //19
     console.log(arr);           //["name", "michael", "age", "24"]
     console.log(arr.length);    //4

例:实现数组中数字的求和

     var arr=[10,11,12,13,14,15];
     var str=arr.join("+");      //"10+11+12+13+14+15"
     var total=eval(str);        //eval 将指定的字符串变成真正的额表达式执行
     console.log(total);         //75
     console.log(arr);           //[10, 11, 12, 13, 14, 15]

第四组:排列和排序

9.reverse 数组倒过来排列,原有数组改变。

     var arr=[10,11,12,13,14,15];
     console.log(arr);           //[10, 11, 12, 13, 14, 15]
     var res=arr.reverse();      //"10+11+12+13+14+15"
     console.log(res);         //[15, 14, 13, 12, 11, 10]

10.sort 数组的排序,可以实现由大到小(由小到大),原有的数组也变

直接写sort只能处理10以内的数字排序,处理10以上的我们需要传递一个参数,这个参数必须是函数

     var arr=[10,12,11,19,13,15,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]
     var res=arr.sort();
     console.log(res);         //[10, 11, 12, 13, 15, 19, 6]

改进:

     var arr=[10,12,11,19,13,15,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]
     var res1=arr.sort(function(a,b){return a-b;});   //实现由小到大
     console.log(res1);
     var res2=arr.sort(function(a,b){return b-a;})   //实现由大到小
     console.log(res2);         //[10, 11, 12, 13, 15, 19, 6]
     var arr=[10,12,11,19,13,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]

     var res1=arr.sort(function(a,b){
     //a表示每一次循环的时候的当前项,b是后面的项
     //return a-b;当前项减去后一项,如果大于0,代表前面的比后面的大,这样的话就交换位置
     //冒泡排序:sort实现排序,就是遵循冒泡排序的思想实现的
     console.log(a+"<====>"+b);
     return a-b;});   //实现由小到大

第五组:一些常用但不兼容

11.indexOf array1.indexOf(searchElement[, fromIndex])

fromIndex可选 用于开始搜索的数组索引。 如果省略 fromIndex,则从索引 0 处开始搜索。
数组中的 searchElement 的第一个匹配项的索引;如果未找到 searchElement,则为 -1。

     var arr=["hello","michael","good","study"];
     var p=arr.indexOf("mi",0);
     console.log(p);           //-1

12.forEach array1.forEach(callbackfn[, thisArg])

callbackfn 必选。 最多可以接受三个参数的函数。 对于数组中的每个元素,forEach 都会调用 callbackfn 函数一次。

thisArg 可选。 callbackfn 函数中的 this 关键字可引用的对象。 如果省略 thisArg,则 undefined 将用作 this 值。

如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

对于数组中出现的每个元素,forEach 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 将不会为数组中缺少的元素调用回调函数。

除了数组对象之外,forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数的语法:function callbackfn(value, index, array1):

参数 参数说明
value 数组元素的值
index 数组元素的数字索引
array1 包含该元素的数组对象
     // Create an array.
     var numbers = [10, 11, 12];

     // Call the addNumber callback function for each array element.
     var sum = 0;
     numbers.forEach(
     function addNumber(value) { sum += value; }
     );

     document.write(sum);
     // Output: 33

https://msdn.microsoft.com/zh-cn/library/ff679980(v=vs.94).aspx

13.map array1.map(callbackfn[, thisArg])

callbackfn 必选。 最多可以接受三个参数的函数。 对于数组中的每个元素(不会对undefined元素调用),map 方法都会调用 callbackfn 函数一次。

[, thisArg] 可选。 callbackfn 函数中的 this 关键字可引用的对象。 如果省略 thisArg,则 undefined 将用作 this 值。

返回值是一个新数组,其中的每个元素均为关联的原始数组元素的回调函数返回值。如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 将不会为数组中缺少的元素调用回调函数。除了数组对象之外,map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数的语法如下所示:function callbackfn(value, index, array1):

参数 参数说明
value 数组元素的值
index 数组元素的数字索引
array1 包含该元素的数组对象
    // Define the callback function.
     function AreaOfCircle(radius) {
     var area = Math.PI * (radius * radius);
     return area.toFixed(0);
     }

     // Create an array.
     var radii = [10, 20, 30];

     // Get the areas from the radii.
     var areas = radii.map(AreaOfCircle);

     document.write(areas);

     // Output:
     // 314,1257,2827
     */

本文记录关于js数组的一些常用方法,搜集总结,如有不妥,望指正。


Michael翔
2.4k 声望219 粉丝